<template>
    <div>
        <div id="search">
            <Search
                    @setSearchForm="setSearchForm"
                    @changeSearchForm="changeSearchForm"
                    :searchForm="searchForm"
                    :searchFormObject="searchFormObject"
                    :searchOptions="searchOptions"
            ></Search>
        </div>
        <div id="searchbar" class="pt20">
            <el-button size="mini" @click="list()">刷新</el-button>
            <PersButton
                    type="primary"
                    size="mini"
                    perms="initial:member:add"
                    label="添加"
                    @click="add"
            ></PersButton>
        </div>
        <div id="body">
            <el-table
                    :data="tableData"
                    border
                    ref="container"
                    style="width: 100%"
            >
                <el-table-column
                        :key="index"
                        v-for="(item, index) in fieldList"
                        :prop="item.field_name"
                        :label="item.show_name"
                        align="center"
                        v-if="item.is_show"
                >
                    <template slot-scope="scope">
                        <template v-if="item.field_name == 'status'">
                            <span v-if="scope.row.status == 1" style="color:green;">正常</span>
                            <span v-else style="color:red;">禁用</span>
                        </template>
                        <template v-else>{{ scope.row[item.field_name] }}</template>
                    </template>
                </el-table-column>

                <el-table-column fixed="right" label="操作">
                    <template slot="header" slot-scope="scope">
                        <span>操作</span>
                        <el-popover class="upload-demo" trigger="click" width="100">
                            <div :key="index" v-for="(item, index) in fieldList">
                                <el-checkbox
                                        @change="(checked) => checkBoxStatus(checked, item)"
                                        v-if="item.is_show == 1"
                                        :checked="true"
                                >{{ item.show_name }}
                                </el-checkbox>
                                <el-checkbox
                                        @change="(checked) => checkBoxStatus(checked, item)"
                                        v-else
                                >
                                    {{ item.show_name }}
                                </el-checkbox>
                            </div>
                            <i
                                    class="el-icon-setting"
                                    slot="reference"
                                    style="padding-left: 10px"
                            ></i>
                        </el-popover>
                    </template>
                    <template #default="scope">
                        <PersButton
                                type="warning"
                                size="mini"
                                label="修改"
                                icon="fa  fa-pencil"
                                perms="initial:member:edit"
                                @click="edit(scope.row)"
                        ></PersButton>
                        <PersButton
                                type="danger"
                                size="mini"
                                icon="el-icon-delete"
                                perms="initial:member:del"
                                label="删除"
                                @click="del(scope.row)"
                        ></PersButton>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div id="page">
            <el-pagination
                    :page-sizes="['10', '20', '50', '100']"
                    :total="total"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
            >
            </el-pagination>
        </div>
        <el-dialog
                v-dialogDrag
                :visible.sync="dialogOpen"
                width="90%"
                append-to-body
                :title="dialogStatus === 'create' ? '新增' : '修改'"
        >
            <create
                    v-if="dialogOpen"
                    @childByDialogVisible="childByDialogVisible"
                    :dialogStatus="dialogStatus"
                    :rowData="dataParameter"
            ></create>
        </el-dialog>
    </div>
</template>

<script>
    import Panle from '@/components/Panle';
    import PersButton from "@/components/PersButton";
    import {selectRole} from '@/api/system/role';
    import {fieldList, fieldUpdate} from "@/api/field/field";
    import {listMember, deleteMember} from "@/api/member/member";
    import {allInstitution} from "@/api/institution/institution";
    import Search from "@/components/common/search";
    import Create from "./create";

    let PAGE_TYPE_NAME = "member";

    export default {
        components: {
            PersButton,
            Search,
            Create
        },
        data() {
            return {
                roleslist: [],
                dialogOpen: false,
                dialogStatus: 'create',
                dataParameter: {},
                pageSize: 10, //一页显示多少条
                pageNumber: 1,
                total: 0, //总页数
                tableData: [],
                fieldList: [],
                institutionList: [],
                //查询条件
                searchOptions: {
                    institution_id: false
                },
                searchForm: {
                    institution_id: "",
                    user_name: "",
                    status: ""
                },
                searchFormObject: [
                    {
                        label: "筛查机构",
                        field: "institution_id",
                        type: "select",
                        options: [],
                    },
                    {
                        label: "登录账号",
                        field: "user_name",
                        type: "input",
                        options: {},
                    },
                    {
                        label: "状态",
                        field: "status",
                        type: "select",
                        options: [{
                            id: 0,
                            name: "禁用",
                        }, {
                            id: 1,
                            name: "正常",
                        }],
                    }
                ],
            };
        },
        created() {
            this.init();
            this.getInstitutionList();
            this.getFieldList();
        },
        methods: {
            init() {
                let role = this.$store.state.member.role;
                //省级
                if (role == 7) {
                } else if (role == 11) {    //市级
                } else if (role == 12) {    //区县级
                } else if (role == 6 || role == 8 || role == 9 || role == 10) {
                    //筛查人员
                    this.searchForm.institution_id = parseInt(this.$store.state.member.member.institution_id);
                    this.searchOptions.institution_id = true;
                }
                this.list();
            },
            setSearchForm(searchForm) {
                this.searchForm = searchForm;
                this.pageNumber = 1;
                this.init();
            },
            changeSearchForm(searchForm) {
                this.searchForm = searchForm;
            },
            handleClickExport() { //下载数据
                let params = {
                    supervise_id: this.searchForm.supervise_id,
                    institution_id: this.searchForm.institution_id,
                    uid: this.$store.state.member.uid,
                };
                window.location.href = this.setQueryPath(process.env.VUE_APP_PUBLIC_PATH + "/apiadmin/member/getExport", params);
            },
            setQueryPath(url, queryData) {
                var _str = "";
                for (var o in queryData) {
                    _str += o + "=" + queryData[o] + "&";
                }
                var _str = _str.substring(0, _str.length - 1);
                return url + '?' + _str;
            },
            list() {
                let param = {
                    pageSize: this.pageSize,
                    page: this.pageNumber,
                    user_name: this.searchForm.user_name,
                    institution_id: this.searchForm.institution_id,
                    status: this.searchForm.status
                };
                listMember(param).then((res) => {
                    if (res.code == 200) {
                        this.tableData = res.data.data;
                        this.total = res.data.total;
                    }
                });
            },
            handleSizeChange: function (e) {
                this.pageSize = e;
                this.list();
            },
            handleCurrentChange: function (e) {
                this.pageNumber = e;
                this.list();
            },
            //获取字段列表
            getFieldList() {
                fieldList({action_name: PAGE_TYPE_NAME}).then((result) => {
                    this.fieldList = result.data;
                }).catch((err) => {
                    console.log("err", err);
                });
            },
            // 当点击checkbox时改变字段显示和隐藏
            checkBoxStatus(checked, row) {
                let params = JSON.parse(JSON.stringify(row));
                params.is_show = checked ? 1 : 0;
                fieldUpdate(params).then((result) => {
                    this.getFieldList();
                }).catch((err) => {
                    console.log("err", err);
                });
            },
            //添加
            add() {
                this.dialogOpen = true
                this.dialogStatus = 'create'
            },
            //修改
            edit(row) {
                this.dialogOpen = true
                this.dialogStatus = 'update'
                this.dataParameter = row;
            },
            //删除
            del(data) {
                this.$confirm('确定删除【' + data.institution_name + '】', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteMember(data).then((res) => {
                        if (res.code === 200) {
                            this.msgSuccess(res.msg);
                            this.list();
                        } else {
                            this.msgError(res.msg);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //批量删除
            delAll() {
                if (this.multipleSelection.length < 1) {
                    this.msgError("请选择数据");
                } else {
                    let ids = this.multipleSelection.join(",");
                    this.$confirm('确定删除【' + ids + '】', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.multipleSelection.forEach((item) => {
                            deleteMember({id: item}).then((res) => {
                                if (res.code === 200) {
                                    this.msgSuccess(res.msg);
                                    this.list();
                                } else {
                                    this.msgError(res.msg);
                                }
                            })
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }
            },
            getInstitutionList() {
                let param = {
                    institution_id: this.searchForm.institution_id,
                };
                allInstitution(param).then((res) => {
                    if (res.code === 200) {
                        this.institutionList = res.data;
                    } else {
                        this.msgError(res.msg);
                    }
                })
            },
            //对话框点击确定后的回调事件
            childByDialogVisible(childValue, isUpdate) {
                this.dialogOpen = childValue
                this.dataParameter = ""
                if (isUpdate) {
                    this.list()
                }
            },
        },
        watch: {
            "institutionList"(newVal, oldVal) {
                if (oldVal !== newVal && typeof newVal == "object") {
                    newVal.forEach((e) => {
                        this.searchFormObject[0].options.push({id: e.id, name: e.institution_name});
                    })
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    @import "@/assets/css/common.scss";

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    #search,
    #body,
    #functional,
    #page {
        padding-top: 20px;
    }

    .el-dialog__footer {
        text-align: center;
    }

    .demo-form-inline {
        .el-form-item {
            margin-bottom: 0;
        }
    }

    .el-tree {
        max-height: 200px;
        overflow: auto;
        background: #f7f7f7;
    }

    .el-tree-node__label,
    .el-textarea__inner {
        font-size: 12px;
    }

    .groupmenu
    .el-tree-node__children
    .el-tree-node__children
    .el-tree-node__children
    .el-tree-node__content {
        float: left;
        width: 100px;
    }

    .el-checkbox__label {
        font-size: 12px !important;
    }

    .uploadcol {
        display: flex;
        flex-flow: column;
        width: 100px;
    }

    .uploadborder {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        /* cursor: pointer;
                                    position: relative;
                                    overflow: hidden; */
        width: 100px;
        height: 100px;
    }
</style>
